<template>
  <div class="pld">
    <discoverm></discoverm>
    <div class="pld_main">
      <el-container>
        <el-aside width="709px" class="pldel-aside">
          <div class="pld_top">
            <div>
              <img
                :src="playlistpld.coverImgUrl"
                alt=""
                style="width: 208px; height: 208px; float: left"
              />
            </div>
            <div
              style="width: 410px; height: 48px; float: left; margin-left: 22px"
            >
              <h2 style="font-size: 20px">
                {{ playlistpld.name }}
              </h2>
              <div>
                <img
                  :src="playlistpld.creator.avatarUrl"
                  alt=""
                  style="width: 35px; height: 35px"
                />
                <span>{{ playlistpld.creator.nickname }}</span>
                <span>{{ playlistpld.createTime }}</span>
              </div>
              <div class="tag-wrap">
                <span class="title">标签:</span>
                <!-- 分类标签 -->
                <ul>
                  <li
                    v-for="(item, index) in playlistpld.tags"
                    :key="index"
                    style="float: left"
                  >
                    {{ item }}
                  </li>
                </ul>
              </div>
              <br />
              <p style="margin-top: 60px">
                {{ playlistpld.description }}
              </p>
            </div>
          </div>
          <div class="pld_mid">
            <div>
              <h3>歌曲列表</h3>
              <span>19首歌</span>
              <span>播放：51931次</span>
            </div>
            <div>
              <table class="pldtable" style="width: 100%">
                <thead>
                  <tr>
                    <td style="flex: 74"></td>
                    <td style="flex: 237">歌曲列表</td>
                    <td style="flex: 111">时长</td>
                    <td style="flex: 89">歌手</td>
                    <td style="flex: 127">专辑</td>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in playlistpld.tracks">
                    <td style="flex: 74">
                      {{ index + 1 }}
                      <i
                        class="el-icon-video-play"
                        @click="playMusic(item.id)"
                      ></i>
                    </td>
                    <td style="flex: 237" >{{ item.name }}</td>
                    <td style="flex: 111">3分10秒</td>
                    <td style="flex: 89">{{ item.ar[0].name }}</td>
                    <td style="flex: 127">{{ item.al.name }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="pld_bottom">
            <div class="hd1">评论</div>
            <ul style="width: 100%; height: 100%">
              <li v-for="item in comments" style="width: 100%; height: 82px">
                <!-- <img :src="item.user.avatarUrl" alt="" />13 -->
                123
              </li>
            </ul>
          </div>
        </el-aside>
        <el-main width="270" class="pldel-main">
          <span style="font-size: 12px">喜欢这个歌单的人</span>
          <el-divider></el-divider>

          <ul style="height: 150px">
            <li
              style="width:50px;height:50px;float:left;margin-left6px"
              v-for="(item, index) in userLike"
              v-if="index <= 7"
            >
              <img :src="item.avatarUrl" alt="" width="50px" />
            </li>
          </ul>
          <span style="font-size: 12px">相关推荐</span>
          <el-divider></el-divider>
          <ul>
            <li
              v-for="item1 in related"
              style="width: 210px; height: 62px; margin-top: 14px"
              class="klli"
            >
              <div style="display: block; width: 100%; height: 100%">
                <div style="float: left; width: 62px; height: 62px">
                  <img
                    :src="item1.coverImgUrl"
                    alt=""
                    style="width: 62px; height: 60px"
                    @click="toArtist(item1.id)"
                  />
                </div>
                <div style="float: left; overflow: hidden">
                  <h4 style="height: 30px; width: 133px">
                    <span style="font-size: 14px">{{ item1.name }}</span>
                  </h4>
                </div>
                <br />
                <p style="font-size: 12px">
                  by&nbsp;{{ item1.creator.nickname }}
                </p>
              </div>
              <!-- <img :src="item1.picUrl" alt="" style="width:62px;height:62px" > -->
            </li>
          </ul>
        </el-main>
      </el-container>
    </div>
    <div class="player">
      <!-- autoplay 自动播放 -->
      <audio :src="musicUrl" controls autoplay class="player_audio"></audio>
    </div>
  </div>
</template>

<script>
import discoverm from "@/views/discoverM/discoverM.vue";
import axios from "axios";
export default {
  name: "playlistdetail",
  components: {
    discoverm,
  },
  data() {
    return {
      activeIndex: "1",
      //总条数
      total: 0,
      //页码
      page: 1,
      //歌单详细数据
      playlistpld: [],
      comments: [],
      musicUrl: "",
      userLike: [],
      related: [],
    };
  },
  created() {
    axios({
      url: "http://localhost:3000/related/playlist",
      method: "get",
      params: {
        id: this.$route.query.id,
      },
    }).then((res) => {
      this.related = res.data.playlists;
    });
    axios({
      url: "http://localhost:3000/playlist/subscribers",
      method: "get",
      params: {
        id: this.$route.query.id,
      },
    }).then((res) => {
      this.userLike = res.data.subscribers;
    });
    axios({
      url: "http://localhost:3000/playlist/detail",
      method: "get",
      params: {
        id: this.$route.query.id,
      },
    }).then((res) => {
      this.playlistpld = res.data.playlist;
    });
    axios({
      url: "http://localhost:3000/comment/playlist",
      method: "get",
      params: {
        id: this.$route.query.id,
        // limit:10,
        // offset:0
      },
    }).then((res) => {
      console.log(res);
      //   // 总个数
      //   this.total = res.data.total
      //   // 评论数据
      //   this.comments = res.comments
    });
  },
};
</script>

<style>
* {
  font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
  font-weight: normal;
}

.pld {
  background-color: rgb(245, 245, 245);
}
.pld_main {
  width: 979px;
  margin: 0 auto;
  height: 2100px;
  background-color: rgb(255, 255, 255);
  border-left: solid 1px rgb(211, 211, 211);
  border-right: solid 1px rgb(211, 211, 211);
  border-bottom: solid 1px rgb(211, 211, 211);
}
.pldel-main {
  padding: 0;
  border-left: solid 1px rgb(211, 211, 211);
}
.pldel-aside {
  padding: 47px 30px 40px 39px;
}
.pld_top {
  width: 640px;
  height: 291px;
}
.pld_mid {
  width: 640px;
  height: 471px;
  margin-top: 27px;
}
.pld_bottom {
  height: 1000px;
}
.pldtable tr {
  display: flex;
}
.pldtable {
  border: 1px solid;
}
.pldtable td {
  padding: 8px 10px 8px 10px;
  background-color: #fff;
}
.pldtable thead td {
  border-right: 1px solid rgb(211, 211, 211);
  border-bottom: 1px solid rgb(211, 211, 211);
}
.pldtable tr {
  background-color: rgb(247, 247, 247, 0.5);
}
.activel {
  background-color: pink;
}
.hd1 {
  font-size: 20px;
  margin: 0px 10px 0px 20px;
  border-bottom: 2px solid #c10d0c;
}
</style>